<template>
  <view class="user-list" v-if="showPage">
    <view class="search-header">
      <u-search placeholder="请输入用户名手机号或姓名" v-model="keyWord" class="search-input" @clear="handleClear" @search="handleSearch" @custom="handleSearch" :show-action="true" actionText="搜索"></u-search>
    </view>
    <view class="no-data" v-if="list.length<=0">
      <image src="./../../static/empty-nouser.png"></image>
      <span>该用户未关联，请输入用户手机号或姓名进行关联</span>
    </view>
    <view class="list" v-else>
      <view class="list-item" v-for="(item,index) of list" :key="index">
        <view class="base-info">
          <view>
            <image :src="item.imageUrl"></image>
            <span>{{item.nickName}}</span>
          </view>
          <view class="btn" @click="handleLink(item,index)" v-if="!item.qxUserId">确认关联</view>
          <view class="unbtn" v-else>已关联</view>
        </view>
        <view class="member-name"><span>会员姓名</span><span>{{item.realName}}</span></view>
        <view class="member-mobile"><span>手机号</span><span>{{item.phoneNum}}</span></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },
  data () {

    return {
      keyWord: '',
      list: [],
      showPopup: true,
      showPage: false
    }
  },
  onLoad (option) {
    if (option.qywxUserInfo) {
      this.$setStorage("qywxUserInfo", option.qywxUserInfo)
    }
    console.log(option)
    if (option.state) {
      let state = option.state
      let stateJSON = state.replace('#wechat_redirect', '')
      let orgId = state.split('-') || []
      this.$setStorage("orgId", orgId[1])
      this.open_invoke(orgId[1])
    }
  },
  mounted () {
    //
  },
  methods: {
    open_invoke (orgId) {
      let data = {
        orgId: orgId,
        url: location.origin + location.pathname + location.search
      }
      this.$Api.mxp_api('crm-server/qywx/jsdk/getAllConfig', 'POST', data, true).then(res => {
        if (res.resp_code == 0) {
          this.$wxMethod.qymethods(res.datas, 'getCurExternalContact').then(ress => {
            if (ress.err_msg === 'getCurExternalContact:ok') {
              this.$setStorage("qxUserId", ress.userId)
              this.getUserInfo()
            }
          })
        } else {
          this.$showToast(res.resp_msg)
        }
      })
    },
    handleClear () {
      this.keyWord = ''
      this.list = ''
    },
    // 查询当前登陆用户的信息 userInfo
    async getUserInfo () {
      try {
        this.$showLoading()
        let params = {
          orgId: this.$getStorageSync('orgId'),
          qxUserId: this.$getStorageSync('qxUserId'),
        }
        const res = await this.$Api.mxp_api('crm-server/jinxinMember/selectMemberCardById', 'GET', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          if (res.datas) {
            let data = res.datas || {}
            this.$setStorage("memberId", data.id)
            this.$navigateTo(`../scanUser/index?route=userList`)
          } else {
            this.showPage = true
          }
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    },
    // 绑定
    handleLink (item) {
      uni.showModal({
        content: '确认关联此用户信息吗？',
        success: (res) => {
          if (res.confirm) {
            this.bind(item)
          }
        }
      });
    },
    // 绑定
    async bind (item) {
      try {
        this.$showLoading()
        let params = {
          orgId: this.$getStorageSync('orgId'),
          id: item.id,
          qxUserId: this.$getStorageSync('qxUserId')// 外部联系人id
        }
        const res = await this.$Api.mxp_api('crm-server/jinxinMember/updateMemberCardById', 'POST', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          this.list = res.datas || []
          this.$showToast(res.resp_msg)
          setTimeout(() => {
            this.$setStorage("memberId", item.id)
            this.$navigateTo(`../scanUser/index?route=userList`)
          }, 1000);
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    },
    // 查询
    async handleSearch () {
      try {
        if (!this.keyWord) {
          this.$showToast('请输入用户名手机号或姓名')
          return false;
        }
        this.$showLoading()
        let params = {
          orgId: this.$getStorageSync('orgId'),
          phoneNum: this.keyWord,
        }
        const res = await this.$Api.mxp_api('crm-server/jinxinMember/selectMemberCardByPhoneOrRealName', 'GET', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          this.list = res.datas || []
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    }
  },
  onPullDownRefresh () {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
}
</script>

<style lang="scss">
page {
  background-color: rgba(246, 250, 253, 1);
}

.user-list {
  .search-header {
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96rpx;
    background: #ffffff;
  }
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 45%;
    image {
      width: 320rpx;
      height: 320rpx;
    }
    span {
      width: 450rpx;
      text-align: center;
      margin-top: 16rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
    }
  }
  .list {
    padding: 24rpx;
  }
  .list-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 16rpx;
    .base-info {
      justify-content: space-between;
    }
    view {
      display: flex;
      &:first-child {
        width: 100%;
        align-items: center;
        image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 4rpx;
        }
        span {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.9);
          margin-left: 32rpx;
        }
      }
      .btn {
        padding: 8rpx 32rpx;
        background: #4474be;
        border-radius: 44rpx;
        width: 176rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
      .unbtn {
        padding: 8rpx 32rpx;
        background: rgba(0, 0, 0, 0.26);
        border-radius: 44rpx;
        width: 148rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }

    .member-name {
      margin-top: 32rpx;
    }
    .member-mobile {
      margin-top: 8rpx;
    }
    .member-name,
    .member-mobile {
      display: flex;

      span {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        &:first-child {
          width: 128rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
}
</style>
